<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>europa</title>
    <%@include file="/template/default/common/header.jsp"%>
    <meta http-equiv="refresh" content="60">
    <script src="/static/echarts/plugin/echarts-liquidfill.js"></script>
    <script type="application/javascript">
        $(document).ready(function() {

            var host;
            $.get('host.htm', "").done(function (hostdata) {
                host = JSON.parse(hostdata);
                $("#host").prepend(
                    "<div style=\"margin-left: 30px;font-size: 15px; float:left\">" +
                            "名字:"+ host.name +"&nbsp&nbspIP:" + host.ip + "&nbsp&nbsp使用的模板:" + host.template +
                    "</div>" +
                    "<div class=\"btn-group\" style=\"margin-right: 30px;float: right;\">" +
                            "<button type=\"button\" class=\"btn btn-default btn-xs\" style=\"float: right;\">下一个</button>" +
                            "<button type=\"button\" class=\"btn btn-default btn-xs\" style=\"float: right;\">配置</button>" +
                            "<button type=\"button\" class=\"btn btn-default btn-xs\" style=\"float: right;\">下一个</button>" +
                    "</div>"
                );

                $.get('application.htm', "hostid=" + host.hostid).done(function (data) {
                    // $.get('application.htm').done(function (data) {
                    var step = parseInt(3600 * 120);
                    var applications = JSON.parse(data);
                    $.each(applications, function(name, value) {
                        $("#man").prepend(
                                "<div id=\"" + value.name + "\" class=\"col-md-4 column\" style=\"height: 300px;width:49.7%;margin:0.3% 0.3% 0% 0%;\">" + "" + "</div>"
                                /*"<div id=\"" + value.name + "\" class=\"col-md-4 column\" style=\"height: 300px;width:50%;padding-left: 0;padding-right: 0;\">" + value.name + "</div>"*/
                        );

                        $.get('applicationdata.htm', "dateline=" + step + "&applicationid=" + value.applicationid).done(function (appdata) {
                            var applicationdata = JSON.parse(appdata);

                            option = {
                                /*backgroundColor: '#272727',*/
                                title: {
                                    text: value.name,
                                    textStyle: {
                                        fontWeight: 'normal',
                                        fontSize: 14,
                                        color: '#C6C6C6'
                                    },
                                    left: '45%',
                                    top : '1%',
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        lineStyle: {
                                            color: '#C6C6C6'
                                        }
                                    }
                                },
                                legend: {
                                    icon: 'rect',
                                    itemWidth: 12,
                                    itemHeight: 5,
                                    itemGap: 4,
                                    /*数据项*/
                                    data: [],
                                    top: '85%',
                                    /*bottom: '5%',*/
                                    left: '2%',
                                    right: '1%',
                                    textStyle: {
                                        //默认情况下,Chrome不支持小于12px的字体
                                        fontSize: 9,
                                        color: '#C6C6C6',
                                    }
                                },
                                grid: {
                                    top: '11%',
                                    left: '0%',
                                    right: '17',
                                    bottom: '17%',
                                    containLabel: true
                                },
                                xAxis: [{
                                    type: 'time',
                                    boundaryGap: false,
                                    axisLine: {
                                        lineStyle: {
                                            color: '#C6C6C6'
                                        }
                                    },
                                    /*axisLabel: {
                                     /!*rotate: 60,*!/
                                     interval: 3600,
                                     },*/
                                    splitLine: {
                                        show: false,
                                    },
                                    data: [],
                                    /*data : function() {
                                     /!* var timestamp = parseInt($.now() / 1000);
                                     timestamp = timestamp - timestamp % 60;
                                     var list = [];
                                     for (var x = 0; x<= 3600; x= x + 60) {
                                     // list.push(formatDate(x));
                                     list.push(timestamp - x);
                                     }*!/

                                     var timestamp = $.now();
                                     timestamp = timestamp - timestamp % 60000;
                                     var list = [];
                                     for (var x = 0; x<= step * 1000; x= x + 60 * 1000) {
                                     // list.push(formatDate(x));
                                     list.push(timestamp - x);
                                     }

                                     return list;
                                     }(),*/
                                }],
                                yAxis: [{
                                    type: 'value',
                                    /*name: '单位（%）',*/
                                    axisTick: {
                                        show: true,
                                    },
                                    axisLine: {
                                        lineStyle: {
                                            color: '#C6C6C6'
                                        }
                                    },
                                    axisLabel: {
                                        margin: 10,
                                        textStyle: {
                                            fontSize: 14
                                        }
                                    },
                                    splitLine: {
                                        show: false,
                                        /*lineStyle: {
                                         color: '#C6C6C6'
                                         }*/
                                    }
                                }],
                                series: []
                            };

                            var num = 1;
                            $.each(applicationdata, function(itemname, itemvalues) {
                                option.legend.data.push(itemname);
                                var areaColor = getColor(num);
                                num++;

                                seriesss = {
                                    name: '',
                                    type: 'line',
                                    smooth: true,
                                    symbol: 'circle',
                                    symbolSize: 5,
                                    showSymbol: false,
                                    lineStyle: {
                                        normal: {
                                            width: 1.7
                                        }
                                    },
                                    /*areaStyle: {
                                     normal: {
                                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                     offset: 0,
                                     color: 'rgba(' + areaColor + ',0.3)',
                                     }, {
                                     offset: 0.8,
                                     color: 'rgb(' + areaColor + ')',
                                     }], false),
                                     shadowColor: 'rgba(0, 0, 0, 0.1)',
                                     shadowBlur: 10
                                     }
                                     },*/
                                    itemStyle: {
                                        normal: {
                                            color: 'rgb(' + areaColor + ')',
                                            borderColor: 'rgba(' + areaColor + ',0.3)',
                                            borderWidth: 12

                                        }
                                    },
                                    /*markPoint : {
                                     data : [
                                     {type : 'max', name: '最大值'},
                                     /!*{type : 'min', name: '最小值'}*!/
                                     ]
                                     },*/
                                    data: []
                                };

                                var loaddata = [];
                                $.each(itemvalues, function(idname, itemvalue) {
                                    var loadtmp = [];
                                    itemvalue.clock = itemvalue.clock * 1000;
                                    itemvalue.clock = itemvalue.clock - itemvalue.clock % (60 * 1000);
                                    loadtmp.push(itemvalue.clock);
                                    loadtmp.push(itemvalue.value);
                                    loaddata.push(loadtmp);
                                });

                                seriesss.name = itemname;
                                seriesss.data = loaddata;
                                option.series.push(seriesss);
                            });

                            var chart = echarts.init(document.getElementById(value.name), 'dark');
                            chart.setOption(option, true);
                        });
                    });
                });
            });
        });

        function getRandomColor() {
            return  '' +
                    (function(color) {
                        return (color +=  '0123456789ABCDEF'[Math.floor(Math.random()* 16)])
                        && (color.length == 6) ?  color : arguments.callee(color);
                    })('');
        }

        function getColor(num) {
            switch (num) {
                case 1:
                    return '0,255,0';
                    break;
                case 2:
                    return '255,255,0';
                    break;
                case 3:
                    return '255,0,0';
                    break;
                case 4:
                    return '0,191,255';
                    break;
                case 5:
                    return '139,0,0';
                    break;
                case 6:
                    return '255,165,0';
                    break;
                case 7:
                    return '255,0,0';
                    break;
                case 8:
                    return '124,252,0';
                    break;
                case 9:
                    return '255,20,147';
                    break;
                default :
                    return randomRgbaColor();
            }
        }

        function randomRgbaColor() { //随机生成RGBA颜色
            var r = Math.floor(Math.random() * 256); //随机生成256以内r值
            var g = Math.floor(Math.random() * 256); //随机生成256以内g值
            var b = Math.floor(Math.random() * 256); //随机生成256以内b值
            var alpha = Math.random(); //随机生成1以内a值
            return '' + r + ',' + g + ',' + b; //返回rgba(r,g,b,a)格式颜色
        }

        function unique(arr) {
            var result = [], isRepeated;
            for (var i = 0, len = arr.length; i < len; i++) {
                isRepeated = false;
                for (var j = 0, len = result.length; j < len; j++) {
                    if (arr[i] == result[j]) {
                        isRepeated = true;
                        break;
                    }
                }
                if (!isRepeated) {
                    result.push(arr[i]);
                }
            }
            return result;
        }
    </script>
</head>
<body>
    <%@include file="/template/default/common/navigation_bar.jsp"%>

    <div id= "host" class="row clearfix" style="background:#333;height:40px;width: 100%; margin: 0.3% 0 0 0; padding-top: 7px">

    </div>

    <div class="container" style="width:100%;">
      <div id="man" class="row clearfix"></div>
    </div>

    <%@include file="/template/default/common/footer.jsp"%>
</body>
</html>
